<template>
  <div class="Box_bj">
    
    <div class="book-details">
      <!-- Book Info Section -->
      <div class="book-info">
        <div class="book-cover">
            <img :src="book.image" alt="Book Cover">
        </div>
        <div class="book-title">
          <h1>{{ book.title }}</h1>
          <p class="author-infos">
            作者: {{ book.author }}
            <span>更新时间: {{ book.time }}</span>
          </p>
          <p style="margin-bottom: 2%;">最新章节: {{ book.new }}</p>
          <p class="tags">{{book.sort[0]}} · {{book.sort[1]==undefined?'':book.sort[1]}}</p>
          <p class="tags">{{ book.content }}</p>
          <div class="book-stats">
            <span>{{ book.zishu }}字</span>
          </div>
          <div class="book-actions">
            <button class="read" @click="yuedu(BookID,1)">免费试读</button>
            <button class="add" @click="shujia()">加入收藏</button>
          </div>
        </div>
         <div class="author-info" @click="Zuozhe_person(book.author)">
          <div class="author-avatar">
            <img :src="book.auimage" alt="Author Avatar">
          </div>
          <div class="author-name">
            <h3>{{ book.author }}</h3>
            <p class="group">{{ book.introduce }}</p>
            <div class="author-stats">
              <span>作品总数 ({{ book.booknum }})</span>
              <span>累计字数({{ book.zinum }})字</span>
              <span>创作天数({{ book.tiannum }})天</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 作品简介 -->
      <div class="xiu_zheng">
        <div class="shuli_left">
          <div class="book-description">
            <h2>作品简介</h2>
            <p>{{ book.contents }}</p>
            <p>{{ book.ps }}</p>
            <div class="book-tags">
              <span v-for="(item,index) in book.sort" :key="index">{{item}}</span>
            </div>
          </div>
          <!-- 目录 -->
          <div class="mu_lu_box">
            <!-- 目录头部 -->
            <div class="mulu-header">
              <span class="mulu-title">目录 <span class="mulu-total">连载共{{Mululist.length}}章</span> <span class="mulu-hot">1年+</span></span>
              <span class="mulu-order">≡  目录</span>
            </div>
            <!-- 最新章节提示 -->
            <div class="mulu-update" @click="yuedu(BookID,Mululist.length)">
              <span class="mulu-update-label">已更新至</span>
              <span class="mulu-update-chapter">第{{Mululist.length}}章 {{Mululist[Mululist.length-1].chapter}}</span>
              <span class="mulu-read">立即阅读 &gt;</span>
            </div>
            <!-- 正文卷 -->
            <div class="mulu-section">
              <span class="mulu-section-title">正文卷·共{{Mululist.length}}章</span>
              <span class="mulu-free">免费</span>
            </div>
            <!-- 章节列表 -->
            <div class="mulu-list">
              <div class="mulu-col">
                <div v-for="(item,index) in Mululist" @click="yuedu(BookID,item.id)">
                  第{{ index+1 }}章 {{item.chapter}}
                  <img v-show="item.isnovip==1" src="../assets/image/mima.png" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 右边竖向 -->
        <div class="shuxiang">
          <!-- <div class="section-title">
            <h2>作品荣誉</h2>
            <div class="other-sections">
              <p>2025-06-14 累积获得一万个收藏</p>
            </div>
          </div> -->
          
          <!-- 梯子 -->
         <div class="xuan_ti">
           <div class="xuan_ti-header">
             <span class="xuan_ti-title">{{ book.sort[0] }}小说推荐</span>
           </div>
           <div class="xuan_ti-list">
             <div class="xuan_ti-item" v-for="(item,index) in tuijianWU" :key="index" @click="TuiXq(item.id)">
               <img class="xuan_ti-cover" :src="item.image" alt="长生修仙，与龟同行">
               <div class="xuan_ti-info">
                <div class="xuan_ti-book-title">{{item.title}}</div>
                <div class="xuan_ti-book-tags">{{ item.contents }}</div>
                <div class="xuan_ti-book-tags">{{item.content}}</div>

               </div>
             </div>
           </div>
         </div>
         <!-- 广告 -->
          <a href="https://tp.9377s.com/1264647/?yyad_type=360zs&ljr360=qKAGPWL2CPZ0&jzqs=1141155&sid=new&mvosr=qKAGPWL2CPZ0&mvaid=1141155" 
          target="_blank">
            <img class="gg_12" src="../assets/image/gg12.jpg" alt="">
          </a>
          
        </div>
        
      </div>

    </div>
  
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      book: {},
      author: {
        avatar: require('@/assets/image/100.jpg'), // Replace with actual image path
        name: '江雀',
        group: '阅文集团Lv.1作家',
        totalWorks: '1',
        totalWords: '19',
        creationDays: '47'
      },
      BookID:0,//书本id
      Mululist:[],//目录列表
      tuijianWU:[],//推荐列表
    };
  },
  mounted() {
    this.BookID = this.$route.params.id;
    // You can fetch book and author data from an API or store here
    // For now, we are using static data
    this.BookDList();
  },
  methods:{
    //请求数据
    BookDList(){
      const data = {
        novelid:this.BookID
      };
      
      axios.post('/api/index/detail',data)
        .then(response => {
          console.log(response);
          this.Mululist = response.data.detail[0];
          this.book = response.data.detail[0][0].comment[0];
        })
        .catch(error => {
          console.error(error);
        });
      axios.post('/api/index/tuijian')
        .then(response => {
          // console.log(response.data);
          this.tuijianWU = response.data.data.tuijian;
        })
        .catch(error => {
          console.error('Error fetching book details:', error);
        });
    },
    //添加收藏
    shujia(){
      if(this.$store.state.dlBoole!==''){
        axios.post('/api/index/shujia',{
          phone:this.$store.state.dlBoole.phone,//用户手机号
          novelid:this.BookID,//shu本id
        })
        .then(response => {
          console.log(response.data);
          if(response.data.code == 1){
            this.$message({
              message: '已添加到收藏',
              type: 'success',
              duration:1000
            });
          }else{
            this.$message({
              message: `添加失败，${response.data.msg}`,
              type: 'warning',
              duration:1000
            });
          }
        })
      }else{
        this.$message({
          message: '请先登录',
          type: 'warning',
          duration:1000
        });
      }
    },
    //跳转推荐详情
    TuiXq(id){ 
      this.BookID = id;
      this.BookDList();

     },
    //跳转阅读
    yuedu(bookId,chapterId){
      //书本id 和 章节id
      this.$router.push(`/perusal/${bookId}/${chapterId}`);
    },
    //作者个人页
    Zuozhe_person(name){
      this.$router.push(`/author/${name}`);
    }
  }
};
</script>

<style lang="scss" scoped>
.Box_bj{
  width: 100%;
  overflow: hidden;
  background-image: linear-gradient(to bottom,#f0faff,#fff9f9);
}
.book-details {
  font-family: Arial, sans-serif;
  max-width: 1200px;
  width: 1200px;
  margin: 2% auto;
  .book-info {
    display: flex;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    .book-cover {
      width: 180px;
      height: 240px;
      margin-right: 20px;
      border-radius: 5px;
      box-shadow: 0 0 8px 0 rgb(126, 126, 126);
      img{
        width: 100%;
        height: 100%;
        border-radius: 5px;
        object-fit: cover;
      }
    }

    .book-title {
      h1 {
        font-size: 26px;
        margin-bottom: 8px;
        color: #333;
      }

      .author-infos {
        font-size: 14px;
        color: #666;
        margin-bottom: 5px;
        cursor: pointer;
         overflow: hidden;
            /* 不让文本换行 除非遇到br标签 */
            white-space:nowrap;
            /* 溢出文字用...代替 */
            text-overflow: ellipsis;
        span {
          margin-left: 10px;
        }
      }

      .tags {
        font-size: 14px;
        color: #999;
        margin-bottom: 5px;
         overflow: hidden;
            /* 不让文本换行 除非遇到br标签 */
            white-space:nowrap;
            /* 溢出文字用...代替 */
            text-overflow: ellipsis;
      }

      .book-stats {
        margin-top: 15px;

        span {
          margin-right: 15px;
          font-size: 13px;
          color: #777;
        }
      }

      .book-actions {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;

        button {
          padding: 10px 16px;
          margin: 5px;
          border: none;
          border-radius: 5px;
          font-size: 14px;
          cursor: pointer;
          transition: background-color 0.2s ease;

          &.read {
            background-color: #e7f3ff;
            color: #3498db;

            &:hover {
              background-color: #d0e9ff;
            }
          }

          &.add {
            background-color: #f0f0f0;
            color: #555;

            &:hover {
              background-color: #e0e0e0;
            }
          }

          &.vote {
            background-color: #f0f0f0;
            color: #555;

            &:hover {
              background-color: #e0e0e0;
            }
          }

          &.mobile {
            background-color: #ffeded;
            color: #e74c3c;
            display: flex;
            align-items: center;

            &:hover {
              background-color: #ffd9d9;
            }

            .iconfont {
              margin-right: 5px;
            }
          }
        }
      }
    }
  }

  .author-info-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
  }

  // 左边头像
  .author-info{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-left: 33%;
    cursor: pointer;
    .author-avatar {
      width: 70px;
      height: 70px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .level {
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.6);
        color: #fff;
        font-size: 12px;
        padding: 2px 6px;
        border-radius: 12px;
      }
    }

    .author-name {
      
        text-align: center;
      h3 {
        font-size: 18px;
        margin-bottom: 5px;
        color: #333;
      }

      .group {
        font-size: 13px;
        color: #777;
      }

      .author-stats {
        margin-top: 8px;

        span {
          margin-right: 10px;
          font-size: 12px;
          color: #999;
        }
      }
    }
  }


  //修正
  .xiu_zheng{
    display: flex;
    // align-items: baseline;
    justify-content: space-between;
    margin-top: 2%;
    .shuli_left{
      flex: 1;
      .book-description {
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        margin-bottom: 20px;
        margin-right: 2%;

        h2 {
          font-size: 20px;
          margin-bottom: 12px;
          color: #333;
          border-bottom: 1px solid #eee;
          padding-bottom: 5px;
        }

        p {
          font-size: 15px;
          color: #444;
          line-height: 1.7;
          word-break: break-all;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 8; /* 超出几行省略 */
              overflow: hidden;
        }

        .book-tags {
          margin-top: 15px;

          span {
            display: inline-block;
            padding: 6px 10px;
            background-color: #f0f0f0;
            color: #555;
            font-size: 13px;
            margin-right: 8px;
            border-radius: 4px;
          }
        }
      }
    }
    

    .shuxiang{
      width: 280px;
      
      .section-title {
        padding: 15px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        h2 {
          font-size: 20px;
          color: #333;
          border-bottom:solid 1px #eee;
          padding-bottom: 5px;
        }
        .more {
          color: #999;
          font-size: 14px;
          cursor: pointer;
        }
      }
      // 梯子
      .xuan_ti{
        background: #fff; /* 白色背景 */
        border-radius: 12px; /* 圆角 */
        box-shadow: 0 2px 8px 0 rgba(0,0,0,0.06); /* 阴影 */
        padding: 16px 0 10px 0; /* 上下内边距 */
        font-family: inherit;
        /* 标题栏 */
        .xuan_ti-header{
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 18px 12px 18px;
          font-size: 17px;
          font-weight: bold;
          color: #222;
          .xuan_ti-title{
            font-size: 18px;
            color: #222;
            font-weight: bold;
          }
          .xuan_ti-more{
            font-size: 13px;
            color: #888;
            cursor: pointer;
            transition: color 0.2s;
            font-weight: normal;
            &:hover{
              color: #3498db;
            }
          }
        }
        /* 推荐列表 */
        .xuan_ti-list{
          display: flex;
          flex-direction: column;
          gap: 8px; /* 推荐项间距 */
          padding: 0 10px;
        }
        /* 单本小说 */
        .xuan_ti-item{
          display: flex;
          align-items: flex-start;
          gap: 10px;
          padding: 10px 10px;
          border-radius: 8px;
          cursor: pointer;
          &:hover{
            background: #f5f6fa;
          }
          /* 封面 */
          .xuan_ti-cover{
            width: 44px;
            height: 58px;
            object-fit: cover;
            border-radius: 6px;
            box-shadow: 0 1px 4px rgba(113, 113, 113, 0.758);
            flex-shrink: 0;
            background: #f2f2f2;
          }
          /* 文字信息 */
          .xuan_ti-info{
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-width: 0;
            .xuan_ti-book-title{
              font-size: 14px;
              font-weight: 600;
              color: #222;
              margin-bottom: 2px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .xuan_ti-book-tags{
              font-size: 12px;
              color: #888;
              line-height: 20px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;

            }
          }
        }
      }
      //gg12
      .gg_12{
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 8px;
        margin-top: 20px;
      }
    }
    
  }
  

  .other-sections {
    border-radius: 8px;
    margin-top: 10px;
    p {
      font-size: 13px;
      color: #444;
      line-height: 1.6;
    }

    button {
      padding: 10px 16px;
      border: none;
      background-color: #f0f0f0;
      color: #555;
      cursor: pointer;
      font-size: 14px;
      border-radius: 5px;
      transition: background-color 0.2s ease;

      &:hover {
        background-color: #e0e0e0;
      }
    }

    &.copyright {
      p {
        margin-bottom: 15px;
      }
    }
  }
}
//目录
.mu_lu_box {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.03);
  padding: 18px 18px 24px 18px;
  margin-bottom: 24px;
  font-family: inherit;
  margin-right: 2%;
  .mulu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 22px;
    font-weight: bold;
    color: #222;
    margin-bottom: 12px;
    .mulu-title {
      font-size: 20px;
      font-weight: bold;
      color: #222;
      .mulu-total {
        font-size: 15px;
        color: #888;
        margin-left: 8px;
      }
      .mulu-hot {
        font-size: 13px;
        color: #e94f4f;
        background: #fff0f0;
        border-radius: 4px;
        padding: 2px 6px;
        margin-left: 8px;
      }
    }
    .mulu-order {
      font-size: 14px;
      color: #888;
      cursor: pointer;
    }
  }
  .mulu-update {
    background: #fff7e0;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 17px;
    color: #7a5b1c;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    cursor: pointer;
    .mulu-update-label {
      font-weight: bold;
      margin-right: 6px;
    }
    .mulu-update-chapter {
      font-weight: bold;
      margin-right: 12px;
    }
    .mulu-read {
      margin-left: auto;
      color: #e94f4f;
      font-size: 15px;
      cursor: pointer;
    }
  }
  .mulu-section {
    background: #f5f6fa;
    border-radius: 6px 6px 0 0;
    padding: 10px 14px;
    font-size: 18px;
    color: #222;
    font-weight: bold;
    display: flex;
    align-items: center;
    .mulu-section-title {
      margin-right: 10px;
    }
    .mulu-free {
      font-size: 14px;
      color: #1abc9c;
      background: #e6faf7;
      border-radius: 4px;
      padding: 2px 8px;
      margin-left: 8px;
    }
  }
  .mulu-list {
    display: flex;
    justify-content: space-between;
    background: #fff;
    border-radius: 0 0 6px 6px;
    padding: 18px 10px 10px 10px;
    margin-top: 0;
    .mulu-col {
      flex: 1;
      font-size: 15px;
      color: #222;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr; /* 四列布局 */
      grid-gap: 10px; /* 列间距 */
      div {
        padding: 10px 8px;
        cursor: pointer;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* 溢出隐藏 */
        overflow: hidden;
        /* 不让文本换行 除非遇到br标签 */
        white-space:nowrap;
        /* 溢出文字用...代替 */
        text-overflow: ellipsis;
        &:hover {
          background: #f5f6fa;
        }
        img{
          width: 15px;
          height: 17px;
        }
      }
    }
    .mulu-col + .mulu-col {
      margin-left: 24px;
    }
  }
}
</style>